<template>
  <div>
    <a-row :gutter="24" bo>
      <a-col span="10" style="border-right-style: double">
        <a-form ref="queryTypeFormRef" name="queryTypeForm" :model="queryTypeForm.data" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
          <a-row :gutter="24">
            <a-col span="24">
              <a-form-item name="dictName" label="字典类型名称">
                <a-input v-model:value="queryTypeForm.data.dictName" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col span="24">
              <a-form-item name="dictType" label="字典类型">
                <a-input v-model:value="queryTypeForm.data.dictType" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col span="24">
              <a-form-item name="status" label="字典类型状态">
                <a-select v-model:value="queryTypeForm.data.status" :options="pageData.sysNormalDisableDict" allowClear> </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" class="autoee-button-row">
            <a-col :span="24" style="text-align: right">
              <a-button type="primary" @click="typeTablePage.reload()"> <AutoeeIcon icon="SearchOutlined" />查询 </a-button>
              <a-button @click="resetTypeQueryForm()"><AutoeeIcon icon="redo-outlined" />重置</a-button>
            </a-col>
          </a-row>
          <a-row :gutter="24" class="autoee-button-row">
            <a-col :span="24" style="text-align: left">
              <a-button type="primary" @click="openTypeAddModal()" v-hasPermi="['system:dict:add']"><AutoeeIcon icon="plus-outlined" />新增</a-button>
              <a-button type="primary" danger @click="clickDeleteType()" :disabled="typeTableData.selectedRowKeys.length <= 0" v-hasPermi="['system:dict:remove']"><AutoeeIcon icon="delete-outlined" />删除</a-button>
              <a-button type="primary" @click="clickExportType()" v-hasPermi="['system:dict:export']"><AutoeeIcon icon="export-outlined" />导出</a-button>
            </a-col>
          </a-row>
        </a-form>

        <a-table
          rowKey="dictId"
          :columns="typeTableData.columns"
          :data-source="typeTableData.dataSource"
          :loading="typeTablePage.loading.value"
          :pagination="typeTablePagination"
          @change="typeTableHandChangePage"
          :row-selection="{ selectedRowKeys: typeTableData.selectedRowKeys, onChange: onTypeTableSelectChange, type: 'radio' }"
          bordered
          size="small"
          tableLayout="fixed"
        >
          <template #bodyCell="{ index, column, record }">
            <template v-if="column.key === 'pageIndex'">
              {{ index + 1 }}
            </template>
            <template v-else-if="column.key === 'status'">
              <span>
                {{ AutoeeUtil.getDictLabelByKey(record.status, pageData.sysNormalDisableDict) }}
              </span>
            </template>
            <template v-else-if="column.key === 'typeTableOperateCol'">
              <span>
                <a @click="openTypeDetailModal(record)"> 查看 </a>
                <a-divider type="vertical" v-hasPermi="['system:dict:edit']" />
                <a @click="openTypeUpdateModal(record)" v-hasPermi="['system:dict:edit']"> 修改 </a>
              </span>
            </template>
          </template>
        </a-table>

        <TypeAddUpdateModal ref="typeAddUpdateModalRef" :sysNormalDisableDict="pageData.sysNormalDisableDict" />
        <TypeDetailModal ref="typeDetailModalRef" :sysNormalDisableDict="pageData.sysNormalDisableDict" />
      </a-col>
      <a-col span="14">
        <a-form ref="queryDataFormRef" name="queryDataForm" :model="queryDataForm.data" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
          <a-row :gutter="24">
            <a-col span="24">
              <a-form-item name="dictLabel" label="字典名称">
                <a-input v-model:value="queryDataForm.data.dictLabel" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col span="24">
              <a-form-item name="dictValue" label="字典值">
                <a-input v-model:value="queryDataForm.data.dictValue" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col span="24">
              <a-form-item name="status" label="状态">
                <a-select v-model:value="queryDataForm.data.status" :options="pageData.sysNormalDisableDict" allowClear> </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" class="autoee-button-row">
            <a-col :span="24" style="text-align: right">
              <a-button type="primary" @click="dataTablePage.reload()"> <AutoeeIcon icon="SearchOutlined" />查询 </a-button>
              <a-button @click="resetDataQueryForm()"><AutoeeIcon icon="redo-outlined" />重置</a-button>
            </a-col>
          </a-row>
          <a-row :gutter="24" class="autoee-button-row">
            <a-col :span="24" style="text-align: left">
              <a-button type="primary" @click="openDataAddModal()" v-hasPermi="['system:dict:add']"><AutoeeIcon icon="plus-outlined" />新增</a-button>
              <a-button type="primary" danger @click="clickDeleteData()" :disabled="dataTableData.selectedRowKeys.length <= 0" v-hasPermi="['system:dict:remove']"><AutoeeIcon icon="delete-outlined" />删除</a-button>
              <a-button type="primary" @click="clickExportData()" v-hasPermi="['system:dict:export']"><AutoeeIcon icon="export-outlined" />导出</a-button>
            </a-col>
          </a-row>
        </a-form>

        <a-table
          rowKey="dictCode"
          :columns="dataTableData.columns"
          :data-source="dataTableData.dataSource"
          :loading="dataTablePage.loading.value"
          :pagination="dataTablePagination"
          @change="dataTableHandChangePage"
          :row-selection="{ selectedRowKeys: dataTableData.selectedRowKeys, onChange: onDataTableSelectChange }"
          bordered
          size="small"
          tableLayout="fixed"
        >
          <template #bodyCell="{ index, column, record }">
            <template v-if="column.key === 'pageIndex'">
              {{ index + 1 }}
            </template>
            <template v-else-if="column.key === 'status'">
              <span>
                {{ AutoeeUtil.getDictLabelByKey(record.status, pageData.sysNormalDisableDict) }}
              </span>
            </template>
            <template v-else-if="column.key === 'dataTableOperateCol'">
              <span>
                <a @click="openDataDetailModal(record)"> 查看 </a>
                <a-divider type="vertical" v-hasPermi="['system:dict:edit']" />
                <a @click="openDataUpdateModal(record)" v-hasPermi="['system:dict:edit']"> 修改 </a>
              </span>
            </template>
          </template>
        </a-table>

        <DataAddUpdateModal ref="dataAddUpdateModalRef" :sysYesNoDict="pageData.sysYesNoDict" :sysNormalDisableDict="pageData.sysNormalDisableDict" />
        <DataDetailModal ref="dataDetailModalRef" :sysYesNoDict="pageData.sysYesNoDict" :sysNormalDisableDict="pageData.sysNormalDisableDict" />
      </a-col>
    </a-row>
  </div>
</template>

<script setup name="Type">
import { listType, getType, delType, addType, updateType } from '@/api/system/dict/type';
import TypeAddUpdateModal from './addUpdateModal.vue';
import TypeDetailModal from './detailModal.vue';
import { listData, getData, delData, addData, updateData } from '@/api/system/dict/data';
import DataAddUpdateModal from './dataAddUpdateModal.vue';
import DataDetailModal from './dataDetailModal.vue';
import { computed, reactive, ref } from 'vue';
import { AutoeeIcon } from '@/utils/AutoeeIcon.js';
import AutoeeUtil from '@/utils/AutoeeUtil.js';
import { message } from 'ant-design-vue';

// 当前页面使用的数据
const pageData = reactive({
  sysNormalDisableDict: [],
});

AutoeeUtil.getDictsByType('sys_normal_disable').then((res) => {
  pageData.sysNormalDisableDict = res;
});

// 查询Form
const queryTypeFormRef = ref();
const queryTypeForm = reactive({ data: { params: {} } });

// 重置查询Form
const resetTypeQueryForm = () => {
  AutoeeUtil.resetFormFieldsToEmpty(queryTypeForm.data);
  typeTablePage.reload();
};

// 打开新增窗口
const typeAddUpdateModalRef = ref();
const openTypeAddModal = () => {
  typeAddUpdateModalRef.value.openAddModal(typeTablePage);
};

// 打开修改窗口
const openTypeUpdateModal = (record) => {
  typeAddUpdateModalRef.value.openUpdateModal(record, typeTablePage);
};

// 打开详细窗口
const typeDetailModalRef = ref();
const openTypeDetailModal = (record) => {
  typeDetailModalRef.value.openModal(record);
};

// 点击删除
const clickDeleteType = () => {
  AutoeeUtil.confirmDeleteSelectedData(() => {
    delType(typeTableData.selectedRowKeys).then((res) => {
      typeTableData.selectedRowKeys = [];
      AutoeeUtil.messageSuccess('删除操作成功。');
      typeTablePage.reload();
    });
  });
};

// 点击导出
const clickExportType = () => {
  AutoeeUtil.download('system/dict/type/export', queryTypeForm.data);
};

// 列表数据
const typeTableData = reactive({
  // 列表数据
  dataSource: [],
  // 列表记录数
  total: 0,
  selectedRowKeys: [],
  // 列表列定义
  columns: [
    // {
    //   title: '序号',
    //   dataIndex: 'pageIndex',
    //   key: 'pageIndex',
    //   width: 50,
    //   align: 'center',
    // },
    {
      title: '字典类型',
      key: 'dictType',
      dataIndex: 'dictType',
      width: 160,
    },
    {
      title: '字典类型名称',
      key: 'dictName',
      dataIndex: 'dictName',
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
    },
    {
      title: '操作',
      key: 'typeTableOperateCol',
      width: 100,
    },
  ],
});

// 查询列表
const queryTypeList = () => {
  return listType(queryTypeForm.data);
};

// 用户列表翻页数据：使用vue-request中分页方法，返回参数包含{ run, reload, loading, current, pageSize }
const typeTablePage = AutoeeUtil.usePagination(queryTypeList, typeTableData);

// 用户列表翻页工具条：必须通过计算函数每次重新生成
const typeTablePagination = computed(() => AutoeeUtil.getTablePagination(typeTablePage));

// 手动翻页方法
const typeTableHandChangePage = (page, filters, sorter) => {
  AutoeeUtil.tableHandChangePage(typeTablePage, page, filters, sorter);
};

// 列表选中方法
const onTypeTableSelectChange = (selectedRowKeys, selectedRows) => {
  typeTableData.selectedRowKeys = selectedRowKeys;
  queryDataForm.data.dictType = selectedRows[0].dictType;
  dataTablePage.reload();
};

// 查询Form
const queryDataFormRef = ref();
const queryDataForm = reactive({ data: { params: {}, dictType: '' } });

// 重置查询Form
const resetDataQueryForm = () => {
  typeTableData.selectedRowKeys = [];
  AutoeeUtil.resetFormFieldsToEmpty(queryDataForm.data);
  dataTablePage.reload();
};

// 打开新增窗口
const dataAddUpdateModalRef = ref();
const openDataAddModal = () => {
  if (queryDataForm.data.dictType) {
    dataAddUpdateModalRef.value.openAddModal(queryDataForm.data.dictType, dataTablePage);
  } else {
    AutoeeUtil.messageWarn('请先选择左侧字典类型，再进行新增字典数据！');
  }
};

// 打开修改窗口
const openDataUpdateModal = (record) => {
  dataAddUpdateModalRef.value.openUpdateModal(record, dataTablePage);
};

// 打开详细窗口
const dataDetailModalRef = ref();
const openDataDetailModal = (record) => {
  dataDetailModalRef.value.openModal(record);
};

// 点击删除
const clickDeleteData = () => {
  AutoeeUtil.confirmDeleteSelectedData(() => {
    delData(dataTableData.selectedRowKeys).then((res) => {
      dataTableData.selectedRowKeys = [];
      AutoeeUtil.messageSuccess('删除操作成功。');
      dataTablePage.reload();
    });
  });
};

// 点击导出
const clickExportData = () => {
  AutoeeUtil.download('system/dict/data/export', queryDataForm.data);
};

// 列表数据
const dataTableData = reactive({
  // 列表数据
  dataSource: [],
  // 列表记录数
  total: 0,
  selectedRowKeys: [],
  // 列表列定义
  columns: [
    // {
    //   title: '序号',
    //   dataIndex: 'pageIndex',
    //   key: 'pageIndex',
    //   width: 50,
    //   align: 'center',
    // },
    {
      title: '字典类型',
      key: 'dictType',
      dataIndex: 'dictType',
      width: 160,
    },
    {
      title: '字典值',
      key: 'dictValue',
      dataIndex: 'dictValue',
    },
    {
      title: '字典名称',
      key: 'dictLabel',
      dataIndex: 'dictLabel',
    },
    {
      title: '字典排序',
      key: 'dictSort',
      dataIndex: 'dictSort',
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
    },
    {
      title: '操作',
      key: 'dataTableOperateCol',
      width: 100,
    },
  ],
});

// 查询列表
const queryDataList = () => {
  return listData(queryDataForm.data);
};

// 用户列表翻页数据：使用vue-request中分页方法，返回参数包含{ run, reload, loading, current, pageSize }
const dataTablePage = AutoeeUtil.usePagination(queryDataList, dataTableData);

// 用户列表翻页工具条：必须通过计算函数每次重新生成
const dataTablePagination = computed(() => AutoeeUtil.getTablePagination(dataTablePage));

// 手动翻页方法
const dataTableHandChangePage = (page, filters, sorter) => {
  AutoeeUtil.tableHandChangePage(dataTablePage, page, filters, sorter);
};

// 列表选中方法
const onDataTableSelectChange = (selectedRowKeys) => {
  dataTableData.selectedRowKeys = selectedRowKeys;
};
</script>
<style lang="less"></style>
